<template>
  <div>
    <div>
      <Row class="header" type="flex" justify="start">
        <Col span="24">
          <Icon class="icon" type="ios-podium-outline"/>
          <span class="title">燃气报警器情况分析表</span>
        </Col>
      </Row>
      <br>
      <div id="gasWarnerStatisticsLineEchart" :style="{ width: 100 + '%', height: '480px'}"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'GasWarnerStatisticsLineEchart',
  data () {
    return {
      chartData: []
    }
  },
  props: {
    width: {
      type: Number,
      default: () => {
        return 500
      }
    },
    height: {
      type: Number,
      default: () => {
        return 300
      }
    }
  },
  mounted () {
    // this.chart()
  },
  methods: {
    chart (data) {
      console.log(data)
      this.chartData = data
      let option = {
        // title: {
        //   text: 'Stacked Area Chart'
        // },
        tooltip: {
          trigger: 'axis',
          formatter: function (params, ticket, callback) {
            console.log(params)
            let name = params[0].name
            let label = {
              '安装率': 'aznum',
              '使用率': 'synum',
              '掉线率': 'dxnum'
            }
            let str = ''
            for (let i = 0; i < params.length; i++) {
              str = str + params[i].marker + params[i].seriesName + '：' + params[i].value[label[params[i].seriesName]] + '%' + '<br />'
            }
            return name + '<br />' + str
          },
          axisPointer: {
            type: 'line',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['安装率', '使用率', '掉线率']
        },
        dataset: {
          dimensions: ['statistics_date', 'aznum', 'synum', 'dxnum'],
          source: []
          // source: [
          //   {
          //     name: '03-14',
          //     num1: '99',
          //     num2: '80',
          //     num3: '70'
          //   },
          //   {
          //     name: '03-15',
          //     num1: '97',
          //     num2: '60',
          //     num3: '70'
          //   },
          //   {
          //     name: '03-16',
          //     num1: '80',
          //     num2: '60',
          //     num3: '50'
          //   },
          //   {
          //     name: '03-17',
          //     num1: '70',
          //     num2: '59',
          //     num3: '89'
          //   },
          //   {
          //     name: '03-18',
          //     num1: '55',
          //     num2: '32',
          //     num3: '11'
          //   },
          //   {
          //     name: '03-19',
          //     num1: '11',
          //     num2: '12',
          //     num3: '23'
          //   }
          // ]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          max: 100, // 最大值
          min: 0, // 最小值
          interval: 10,
          axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value} %'// 纵坐标百分比
          },
          axisLine: {
            lineStyle: {
              color: '#bababa' // 轴及其文字颜色
            }
          }
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#bababa' // 轴及其文字颜色
            }
          }
        },
        series: [
          {
            name: '安装率',
            type: 'line',
            // stack: 'Total',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(25,94,250,0.2)'
                },
                {
                  offset: 1,
                  color: 'rgb(255,255,255)'
                }
              ])
            },
            itemStyle: {
              // 通常情况下：
              normal: {
                color: ['rgba(25,94,250,1)']
              },
              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgb(252,252,252)'
              }
            },
            emphasis: {
              focus: 'series'
            }
            // data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '使用率',
            type: 'line',
            // stack: 'Total',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(265,87,0,0.2)'
                },
                {
                  offset: 1,
                  color: 'rgb(255,255,255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              // 通常情况下：
              normal: {
                color: ['rgba(265,87,0,1)']
              },
              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgb(255,255,255)'
              }
            }
            // data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '掉线率',
            type: 'line',
            // stack: 'Total',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(69,166,157,0.2)'
                },
                {
                  offset: 1,
                  color: 'rgb(255,255,255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              // 通常情况下：
              normal: {
                color: ['rgba(69,166,157,1)']
              },
              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
            // data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      }
      this.chartData.forEach(item => {
        // area为空的是之前导入的数据（暂不显示）
        if (item.statistics_date) {
          option.dataset.source.push(item)
        }
      })
      let myChart = echarts.init(document.getElementById('gasWarnerStatisticsLineEchart'))
      myChart.setOption(option)
      // console.log(option)
    }
  }
}
</script>

<style scoped>
.header {
  height: 30px;
}

.icon {
  font-size: 28px;
  font-weight: 600;
  margin-right: 5px;
}

.title {
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
}
</style>
